<template>
  <view class="search-bar">
    <div class="search-content p-[24rpx]">
      <input v-model="ipt" type="text" :placeholder="props.placeholder" class="search-input" confirm-type="search" />
      <view class="search-btn" @click="bindTap()">
        <img class="search-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201739%402x.png" />
      </view>
    </div>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const props = defineProps({
  placeholder: {
    type: String,
    default: '请输入设计师',
  },
});

const ipt = ref('');
const emit = defineEmits(['change']);

const bindTap = () => {
  console.log('点击了搜索');
  emit('change', ipt.value);
};
</script>
<style scoped lang="scss">
.search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 88rpx;
  background: #ffffff;
  box-shadow: 0rpx 1rpx 0rpx 2rpx #e7e7e7;
  padding: 8rpx 0 !important;
  box-sizing: content-box;
  .search-content {
    width: calc(100% - 48rpx);
    height: 72rpx;
    display: flex;
    align-items: center;
    background: #f3f7f8;
    border-radius: 8rpx;
    box-sizing: border-box;
    padding: 0 16px;
    .search-input {
      flex: 1;
      height: 38rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 38rpx;
    }

    .search-btn {
      padding: 20rpx 0 20rpx 40rpx;
      .search-icon {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
</style>
